<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>政府行政权力清单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app01.css">		
	</head>
	<style type="text/css">
        body{overflow:auto; background-color: #eeeeee;}
        .mui-content{background-color: #fff;}
        .mui-content>.mui-table-view:first-child{margin-top: 0;}
        .mui-table-view:before{background:none;}
        .mui-table-view-cell:after{left: 0px;-webkit-transform: scaleY(.2);transform: scaleY(.2);}
        .mui-table-view-cell{padding: .35rem; box-sizing: border-box; color: #333; font-size: .3rem}
        .mui-table-view:after{-webkit-transform: scaleY(.2);transform: scaleY(.2);}
	</style>
	<body>
		<!-- 主体start -->
		<div id="scroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view">
					<template v-for="service in serviceList">
						<li :id="service.serviceOid" class="mui-table-view-cell">{{service.serviceName}}</li>
					</template>
				</ul>   
			</div>
		</div>
		<!-- 主体end -->
	</body>
	<script>
			function my_immersed(immersed) {}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../../js/mui.min.js"></script><!-- mui -->
	<script src="../../../js/common.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script type="text/javascript">
		var pageNumber = 0; //当前页码
		var pageSize = 15; //每页显示的条数
		var maxPageNumber = 1; //最大页数
		var orgId = utils.getUrlParam('orgId');
		var themeId = utils.getUrlParam('themeId');
		var districtId = utils.getUrlParam('districtId');
			
		mui.init({
			pullRefresh: {
				container: "#scroll", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等					
				up: { //上拉加载
					contentrefresh: '正在加载...',
					auto: true, //可选,默认false.自动上拉加载一次
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: pullupRefresh
				}
			}
		});
		
		function pullupRefresh(){
			pageNumber++; //翻下一页
			if(pageNumber <= maxPageNumber) {
				loadMore(pageNumber, pageSize); //具体取数据的方法
			} else {
				mui('#scroll').pullRefresh().endPullupToRefresh(true);
			}
		}
		
		function loadMore(pageNumber, pageSize) {
			var param = 'pageNumber=' + pageNumber + '&random=' + Math.random() + '&pageSize=' + pageSize;
			if(districtId)param += '&districtId=' + districtId;
			if(orgId)param += '&orgId=' + orgId;
			if(themeId)param += '&themeId=' + themeId;
			var url = 'appHttpService/queryBlxServiceList.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 2) {
					mui('#scroll').pullRefresh().endPullupToRefresh(true);
				} else if(data.state == 0) {
					maxPageNumber = data.maxPageNumber;
					var rows = JSON.parse(data.serviceJsonList);
					if(rows != null && rows.length>0) {
						mv.serviceList = mv.serviceList.concat(rows);
						if(rows.length < pageSize) {
							mui('#scroll').pullRefresh().endPullupToRefresh(true);
						}else{
							mui('#scroll').pullRefresh().endPullupToRefresh(false);
						}
					} else {
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}
			}, param);

		};
		
		var mv = new Vue({
			el:'#scroll',
			data:{
				serviceList:[]
			}
		});
		
		var hotservice_fun = function() {
			utils.showWaiting();
	        var hsw = openNewWin('_www/src/work/bszn_info.html?serviceOid=' + this.getAttribute("id"),{bounce:'none'}, 'bszn_info');
	        mui.fire(hsw,'getDetail',{serviceOid:this.getAttribute("id")});
		}
		
		mui('.mui-table-view').on('tap','li',hotservice_fun);
		
	</script>
</html>
